<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta name="keywords" content="select">
  <meta name="description" content="select">
  <title>poTree</title>
  <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <link rel="stylesheet" type="text/css" href="../css/materialdesignicons.min.css">
  <!-- 引入 bootstrap 样式 -->
  <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
  
  <link rel="stylesheet" type="text/css" href="../css/style.min.css">
  <link rel="stylesheet" type="text/css" href="../css/form.css">
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
      font-family: "microsoft yahei";
    }

    ul li {
      list-style-type: none;
    }

    .box {
      width: 200px;
      /*border: 1px solid red;*/
    }

    ul {
      margin-left: 20px;
      /*border: 1px solid blue;*/
    }

    .menuUl li {
      margin: 10px 0;
    }

    .menuUl li span:hover {
      text-decoration: underline;
      cursor: pointer;
    }

    .menuUl li i {
      margin-right: 10px;
      top: 0px;
      cursor: pointer;
      color: #161616;
    }
  </style>
</head>

<body>
  <div class="innerUl">

  </div>
</body>
<script src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/proTree.js"></script>
<script type="text/javascript">
  //后台传入的 标题列表
  var arr = [{
    id: 1,
    name: "一级标题",
    pid: 0
  }, {
    id: 2,
    name: "二级标题",
    pid: 0
  }, {
    id: 3,
    name: "2.1级标题",
    pid: 2
  }, {
    id: 4,
    name: "2.2级标题",
    pid: 2
  }, {
    id: 5,
    name: "1.1级标题",
    pid: 1
  }, {
    id: 6,
    name: "1.2级标题",
    pid: 1
  }, {
    id: 7,
    name: "1.21级标题",
    pid: 6
  }, {
    id: 8,
    name: "三级标题",
    pid: 0
  }, {
    id: 9,
    name: "1.22级标题",
    pid: 6
  }, {
    id: 10,
    name: "1.221级标题",
    pid: 9
  }, {
    id: 11,
    name: "1.2211级标题",
    pid: 10
  }, {
    id: 12,
    name: "1.2212级标题",
    pid: 10
  }

  ];
  //标题的图标是集成bootstrap 的图标  更改 请参考bootstrap的字体图标替换自己想要的图标
  $(".innerUl").ProTree({
    arr: arr,
    close: true,
    simIcon: "", // 单个标题字体图标 不传默认glyphicon-file
    mouIconOpen: "mdi mdi-chevron-down", // 含多个标题的打开字体图标  不传默认glyphicon-folder-open
    mouIconClose: "mdi mdi-chevron-right", // 含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
    callback: function (id, name) {
      alert("你选择的id是" + id + "，名字是" + name);
    }

  })
</script>

</html>